<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-05-21 10:00:38
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-12 14:36:53
 -->
<style lang="less" scoped>
.animated {
    animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  @-webkit-keyframes fadeOutUp {
    from {}
    to {
      opacity: 0.4;
      -webkit-transform: translate3d(0, -300%, 0);
      transform: translate3d(0, -200%, 0);
    }
  }
  @keyframes fadeOutUp {
    from {}
    to {
      opacity: 0.4;
      -webkit-transform: translate3d(0, -300%, 0);
      transform: translate3d(0, -300%, 0);
    }
  }
  .fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
  }
  .userWrap {
    height: 100%;
    overflow: hidden;
    .user {
      text-align: center;
      color: #333333;
      font-size: 0.24rem;
      font-weight: 500;
      line-height: 0.6rem;
      padding: 0 0.12rem;
      // height: 0.8rem;
      // display: flex;
      // align-items: center;
      height: 0.48rem;
      // margin-top: 0.48rem;
      .money{
        color: #FD371A;
      }
    }
  }
</style>
<template>
<!-- 用户滚动推广条 -->
<div class="userWrap">
  <transition name='fade' enter-active-class='fadeOutUp' v-on:after-enter='afterEnter'>
    <div v-show='show' class="user animated" :style="{fontSize:size}">
      <!-- {{usersData[currentNum].nickname}}
       -->
       <span>{{usersData[currentNum].nickname}}</span>
       <span class="money">{{usersData[currentNum].money}}</span>
       <span>万元</span>
    </div>
  </transition>
</div>
</template>

<script>
export default {
  props:{
    size: {
      type: String,
      default: '0.24rem'
    }
  },
  data() {
    return {
      currentNum: 0,
      usersData: [
        {
          nickname: '恭喜王**（137****2876）成功办理车抵贷',
          money: '14.8'
        },
        {
          nickname: '恭喜张*（182****1314）成功办理车抵贷',
          money: '28.1'
        },
        {
          nickname: '恭喜郭**（188****2408）成功办理车抵贷',
          money: '18.2'
        },
        {
          nickname: '恭喜徐**（139****2131）成功办理车抵贷',
          money: '8.9'
        },
        {
          nickname: '恭喜宁**（138****8123）成功办理车抵贷',
          money: '68.5'
        },
        {
          nickname: '恭喜李**（158****1812）成功办理车抵贷',
          money: '27.4'
        },
        {
          nickname: '恭喜钱**（177****2312）成功办理车抵贷',
          money: '37.5'
        },
        {
          nickname: '恭喜赵**（186****9413）成功办理车抵贷',
          money: '40.5'
        },
        {
          nickname: '恭喜孙**（131****4621）成功办理车抵贷',
          money: '50.0'
        }
      ],
      timer: null,
      show: false
    }
  },
  methods: {
    afterEnter: function() {
      this.show = false
      if (this.currentNum >= 8) {
        this.currentNum = 0
      } else {
        this.currentNum += 1
      }
      setTimeout(() => {
        this.show = true
      }, 500)
    }
  },
  mounted() {
    this.timer && clearTimeout(this.timer)
    this.timer = setTimeout(() => {
      this.show = true
    }, 100)
  }
}
</script>
